;(function (Vue) {
	'use strict';
	const todos = [
		{id : 1, title : '刷抖音', isActive : false},
		{id : 2, title : '打台球', isActive : true},
		{id : 3, title : '王者荣耀', isActive : false}
	]

	Vue.directive('focus', {
		inserted : function(el){
			el.focus()
		}		
	})

	// Your starting point. Enjoy the ride!
	window.app = new Vue({
		el:'#todoapp',
		data:{
			filterStat:'all',
			todos,
			curTodo : null
		},
		computed : {
			// 未完成的数量
			leftCount : function(){
				return this.todos.filter(todo=>!todo.isActive).length
			},
			// 计算属性
			filterTodos : function(){
				switch (this.filterStat) {
					case 'active':
						return this.todos.filter(todo=>!todo.isActive)
						break;
					case 'completed':
						return this.todos.filter(todo=>todo.isActive)
						break;
					default:
						return this.todos
						break;
				}
			},
			// 使用计算属性的方式处理全选的联动状态
			toggleStat : function(){
				return this.todos.every(todo => todo.isActive)
			}
		},
		methods:{
			// 添加任务
			addTodo(event){
				var title = event.target.value
				if ( ! title) {
					return
				}
				var id = 1
				if (this.todos.length) {
					id = this.todos[this.todos.length-1].id + 1
				}
				var todo = {
					id,
					title,
					isActive:false
				}
				this.todos.push(todo)
				event.target.value = ''
			},
			// 全选
			toggleAll(event){
				var checked = event.target.checked
				this.todos.forEach(todo => todo.isActive=checked)
			},
			// 删除单个任务
			delTodo(index){
				this.todos.splice(index, 1)
			},
			// 删除所有已经完成的任务
			delCompletedTodo(){
				// 第一种方式
				// for (var i = 0; i < this.todos.length; i++) {
				// 	if (this.todos[i].isActive) {
				// 		this.todos.splice(i, 1)
				// 		// 这里的删除后索引会自动从0开始了,所以要--
				// 		i--
				// 	}
				// }
				// 第二种方式
				this.todos = this.todos.filter(todo=>!todo.isActive);
			},
			// 打开编辑框
			saveTodo(todo, index, event){
				var title = event.target.value.trim()
				if ( ! title.length) {
					// 如果没有填写就删除
					return this.todos.splice(index, 1)
				}
				// 保存编辑的内容
				todo.title = title
				// 取消编辑样式
				this.curTodo = null
			}
		}
	})

	// 路由状态切换
	window.onhashchange = function(){
		var hash = window.location.hash.trim()
		window.app.filterStat = hash.substr(2) || 'all'
	}

	window.onhashchange()
})(Vue);
